<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>账户余额</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/icons-extra.css" />
        <link rel="stylesheet" type="text/css" href="../css/index.css" />
        <!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css"/>		
		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <style>      	
		.mui-control-content {
				background-color: white;
				min-height: 400px;
			}
			.mui-control-content .mui-loading {
				margin-top: 50px;}
		.mui-media img{border-radius: 50%;}
				
		.detail-article{width: 100%; overflow: hidden; background-color: #fff}
        .detail-article nav{ width: 100%;}
        .detail-article nav ul{ width: 100%; padding:5% 0; overflow: hidden; display: table;margin:0 auto;}
        .detail-article nav ul li{ display: table-cell; width: 33.333333%; text-align: center; font-size:15px; color: #585959; border-bottom:solid 1px #C3C3C3; padding: 2% 0;  }        
        .detail-article nav ul .article-active{ border-bottom:2px solid #F14E41; color:#F14E41;}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-table-view" style="box-shadow:none; border: none; background-color: #FFFFFF; position: fixed; top: 0;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">账户余额</h1>
			<a class="mui-icon  mui-icon-more-filled mui-pull-right"></a>
		</header>
		<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed"  style="background-color: #e45050; margin-top: 11%;">
			<li class="mui-table-view-cell">
					<div style="padding: 3% 0 3% 0;">
						<div style="font-size: 14px; color: #FFFFFF;">账户余额(元)</div>
						<div style="font-size: 18px; color: #FFFFFF; margin-top: 3%;">0.00</div>
					</div>
			</li>
	    </ul>
	    <div>
	    	 <ul class="mui-table-view mui-grid-view">
		            <li class="mui-table-view-cell mui-media mui-col-xs-6 " style="border-right: 1px solid #EAEAEA;">
		            	<a href="chong-ti.html">
		                    <span class="yu-chong">充值</span>		                   
		            	</a>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-6 " >
		            	<a href="chong-ti.html">		                    
		                    <span class="yu-ti">提现</span>		                    
		            	</a>
		            </li>
		     </ul>
	    </div>
	    <!--tab-->
	    <article class="detail-article" style="margin-top: 1.8rem;">
				<nav>
					<ul class="article">
						<li id="talkbox1" class="article-active">全部</li>
						<li id="talkbox2">收入</li>
						<li id="talkbox3">支出</li>
					</ul>
				</nav>
				<section class="talkbox1 yux-tab">					
					<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
				        <li class="mui-table-view-cell mui-media">
					        <a href="javascript:;">
						        <img class="mui-media-object mui-pull-left" src="../images/tou-logo.jpg" width="42" height="42">
						            <div class="mui-media-body">
							            <div style="width: 100%;">
							                <p class='mui-ellipsis' style="width: 60%; float: left; display: block;">张笑笑</p>	
							                <div style="float: right; font-weight: bold;">-93.00</div>
							                <div style="clear: both;"></div>
							            </div>
							            <div style="float: left; font-size: 12px; color: #B5B5B5">2017年10月7日</div>							                    
						            </div>
					        </a>
				        </li>
				        <li class="mui-table-view-cell mui-media">
					        <a href="javascript:;">
						        <img class="mui-media-object mui-pull-left" src="../images/tou-logo.jpg" width="42" height="42">
						            <div class="mui-media-body">
							            <div style="width: 100%;">
							                <p class='mui-ellipsis' style="width: 60%; float: left; display: block;">张笑笑</p>	
							                <div style="float: right; font-weight: bold;">-93.00</div>
							                <div style="clear: both;"></div>
							            </div>
							            <div style="float: left; font-size: 12px; color: #B5B5B5">2017年10月7日</div>							                    
						            </div>
					        </a>
				        </li>
				        <li class="mui-table-view-cell mui-media">
					        <a href="javascript:;">
						        <img class="mui-media-object mui-pull-left" src="../images/tou-logo.jpg" width="42" height="42">
						            <div class="mui-media-body">
							            <div style="width: 100%;">
							                <p class='mui-ellipsis' style="width: 60%; float: left; display: block;">张笑笑</p>	
							                <div style="float: right; font-weight: bold;">-93.00</div>
							                <div style="clear: both;"></div>
							            </div>
							            <div style="float: left; font-size: 12px; color: #B5B5B5">2017年10月7日</div>							                    
						            </div>
					        </a>
				        </li>
			        </ul>
				</section>
				<section class="talkbox2 yux-tab" style="display: none; ">					
                    <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
				        <li class="mui-table-view-cell mui-media">
					        <a href="javascript:;">
						        <img class="mui-media-object mui-pull-left" src="../images/tou-logo.jpg" width="42" height="42">
						            <div class="mui-media-body">
							            <div style="width: 100%;">
							                <p class='mui-ellipsis' style="width: 60%; float: left; display: block;">张笑笑</p>	
							                <div style="float: right; font-weight: bold;">-93.00</div>
							                <div style="clear: both;"></div>
							            </div>
							            <div style="float: left; font-size: 12px; color: #B5B5B5">2017年10月7日</div>							                    
						            </div>
					        </a>
				        </li>
				        <li class="mui-table-view-cell mui-media">
					        <a href="javascript:;">
						        <img class="mui-media-object mui-pull-left" src="../images/tou-logo.jpg" width="42" height="42">
						            <div class="mui-media-body">
							            <div style="width: 100%;">
							                <p class='mui-ellipsis' style="width: 60%; float: left; display: block;">张笑笑</p>	
							                <div style="float: right; font-weight: bold;">-93.00</div>
							                <div style="clear: both;"></div>
							            </div>
							            <div style="float: left; font-size: 12px; color: #B5B5B5">2017年10月7日</div>							                    
						            </div>
					        </a>
				        </li>
			        </ul>
				</section>
				<section class="talkbox3 yux-tab" style="display: none;">					
                    <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
				        <li class="mui-table-view-cell mui-media">
					        <a href="javascript:;">
						        <img class="mui-media-object mui-pull-left" src="../images/tou-logo.jpg" width="42" height="42">
						            <div class="mui-media-body">
							            <div style="width: 100%;">
							                <p class='mui-ellipsis' style="width: 60%; float: left; display: block;">张笑笑</p>	
							                <div style="float: right; font-weight: bold;">-93.00</div>
							                <div style="clear: both;"></div>
							            </div>
							            <div style="float: left; font-size: 12px; color: #B5B5B5">2017年10月7日</div>							                    
						            </div>
					        </a>
				        </li>
				        <li class="mui-table-view-cell mui-media">
					        <a href="javascript:;">
						        <img class="mui-media-object mui-pull-left" src="../images/tou-logo.jpg" width="42" height="42">
						            <div class="mui-media-body">
							            <div style="width: 100%;">
							                <p class='mui-ellipsis' style="width: 60%; float: left; display: block;">张笑笑</p>	
							                <div style="float: right; font-weight: bold;">-93.00</div>
							                <div style="clear: both;"></div>
							            </div>
							            <div style="float: left; font-size: 12px; color: #B5B5B5">2017年10月7日</div>							                    
						            </div>
					        </a>
				        </li>
			        </ul>
				</section>
				
			</article>
	    

<script type="text/javascript">
	$(function(){
		$('.article li').click(function(){

			$(this).addClass('article-active').siblings().removeClass('article-active');
			if($(this).attr("id")=="talkbox1"){
				$('.talkbox1').show();
				$('.talkbox2').hide();
				$('.talkbox3').hide();
			}else if($(this).attr("id")=="talkbox2"){
				$('.talkbox2').show();
				$('.talkbox1').hide();
			    $('.talkbox3').hide();
			}else{
				$('.talkbox3').show();
				$('.talkbox1').hide();
				$('.talkbox2').hide();
			}

		});	
	});
</script>
	</body>
</html>
